<template>
  <view>
    <scroll-view scroll-y="true" class="scroll-wrapper">
      <view>
        <view class="wrap">
          <u-form ref="uForm">
            <u-form-item :label-position="labelPosition" label="运输设备" prop="vehicleName" label-width="180"
                         left-icon="map" :leftIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" type="select" :select-open="selectShow" v-model="model.vehicleName" placeholder="请选择租赁设备(必选)" @click="selectShow = true"></u-input>
            </u-form-item>

            <u-form-item :label-position="labelPosition" label="开始地点" prop="address" label-width="180"
                         left-icon="map" :leftIconStyle="{color:'#d5d5d5'}" right-icon="map"
                         :rightIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" placeholder="请在地图选择详细地址" v-model="model.address" type="text" disabled
                       @click="chooseAddress"></u-input>
            </u-form-item>

            <u-form-item :label-position="labelPosition" label="结束地点" prop="address" label-width="180"
                         left-icon="map" :leftIconStyle="{color:'#d5d5d5'}" right-icon="map"
                         :rightIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" placeholder="请在地图选择详细地址" v-model="model.address" type="text" disabled
                       @click="chooseAddress"></u-input>
            </u-form-item>

            <u-form-item :label-position="labelPosition" label="运量" label-width="150" required>
              <u-input :border="border" placeholder="请输入数量" v-model="model.number" type="number"></u-input>
              <u-input :border="border" type="select" :select-open="selectShow" v-model="houseTypeVo" placeholder="请选择计量方式" @click="selectShow = true"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="运距" label-width="150" required>
              <u-input :border="border" placeholder="自动计算运距" v-model="model.price" type="distance"></u-input>
            </u-form-item>
            <u-form-item label-width="150" :label-position="labelPosition" label="单价(元)" required>
              <u-input :border="border" placeholder="请输入租赁单价(含税)" v-model="model.price" type="number"></u-input>
            </u-form-item>
            <u-form-item label-width="150" :label-position="labelPosition" label="开始日期">
              <view class="dateBtn" @click="dateClick">
                {{dateLabel}}<u-icon name="arrow-right"></u-icon>
              </view>
            </u-form-item>
            <u-form-item label-width="150" :label-position="labelPosition" label="结束日期">
              <view class="dateBtn" @click="dateClick">
                {{dateLabel}}<u-icon name="arrow-right"></u-icon>
              </view>
            </u-form-item>

            <!--基础资料 begin-->
            <u-form-item :label-position="labelPosition" label="负责人姓名" prop="manager" label-width="180"
                         left-icon="account" :leftIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" placeholder="请输入负责人姓名(必填)" v-model="model.manager" type="text"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="负责人电话" prop="managerPhone" label-width="180"
                         left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" placeholder="请输入负责人电话(必填)" v-model="model.managerPhone" type="number"
                       maxlength="11"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="公司名称" prop="companyName" label-width="180"
                         left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" placeholder="请输入公司名称(必填)" v-model="model.companyName" type="text"
                       maxlength="11"></u-input>
            </u-form-item>
            <u-form-item :label-position="labelPosition" label="公司性质" prop="companyNature" label-width="180"
                         left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
              <u-input :border="border" placeholder="请输入公司性质(必填)" v-model="model.companyNature" type="text"
                       maxlength="11"></u-input>
            </u-form-item>
            <view class="custom-gap"></view>
            <u-form-item :label-position="labelPosition" label="图片资料" label-width="150" required>
              <u-upload
                  :custom-btn="true" ref="uUpload" :auto-upload="true" :action="action" :max-size="10 * 1024 * 1024" max-count="9" width="160" height="160" :size-type="siteType">
                <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
                </view>
              </u-upload>
            </u-form-item>
            <!--基础资料 end-->
            <u-form-item label-width="150"  :label-position="labelPosition" label="描述">
              <u-input type="textarea" :border="border" v-model="model.introduce" placeholder="请填写车辆描述,包含税率、出厂日期等"  />
            </u-form-item>
            <u-form-item label-width="150"  :label-position="labelPosition" label="项目亮点" required>
              <u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
                <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
              </u-checkbox-group>
            </u-form-item>
          </u-form>
        </view>
      </view>
    </scroll-view>
    <u-select mode="mutil-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
    <u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
    <u-calendar v-model="show" :mode="mode" @change="changeDate" max-date="2100-01-01"></u-calendar>
    <view class="bottom-btn">
      <u-button type="primary" @click="submit">提交</u-button>
    </view>
  </view>
</template>

<script>
import config from "@/common/config.js"
export default {
  props:{
    model:Object
  },
  data() {
    return {
      houseTypeVo: '',
      show: false,
      mode: 'date',
      selectList: [
        [
          {
            value: '一室',
            label: '一室'
          },
          {
            value: '二室',
            label: '二室'
          },
          {
            value: '三室',
            label: '三室'
          },
          {
            value: '四室',
            label: '四室'
          }
        ],
        [
          {
            value: '',
            label: ''
          },
          {
            value: '一厅',
            label: '一厅'
          },
          {
            value: '二厅',
            label: '二厅'
          },
          {
            value: '三厅',
            label: '三厅'
          }
        ],
        [
          {
            value: '',
            label: ''
          },
          {
            value: '一卫',
            label: '一卫'
          },
          {
            value: '二卫',
            label: '二卫'
          }
        ],
      ],
      border: false,
      check: false,
      selectStatus: 'close',
      checkboxList: [
        {
          name: '看房方便',
          checked: false,
          disabled: false
        },
        {
          name: '独卫',
          checked: false,
          disabled: false
        },
        {
          name: '独立阳台',
          checked: false,
          disabled: false
        },
        {
          name: '智能锁',
          checked: false,
          disabled: false
        },
        {
          name: '可短租',
          checked: false,
          disabled: false
        },
        {
          name: '首次出租',
          checked: false,
          disabled: false
        },
        {
          name: '免物业费',
          checked: false,
          disabled: false
        },
        {
          name: '民用水电',
          checked: false,
          disabled: false
        }
      ],
      actionSheetList: [
        {
          text: '电梯房'
        },
        {
          text: '楼梯房'
        }
      ],
      selectShow: false,
      radioCheckWidth: 'auto',
      radioCheckWrap: false,
      labelPosition: 'left',
      errorType: ['toast'],
      actionSheetShow: false,
      dateLabel:'随时入住',
      // 服务器地址
      action: config.staticUrl + '/common/upload',
      siteType:['compressed'],
    };
  },
  watch: {
    model: {
      handler(newName, oldName) {
        this.houseTypeVo = newName.houseType
        // 回显房源亮点
        if(this.model.featureList){
          this.checkboxList.forEach(item=>{
            this.model.featureList.forEach(feature=>{
              if(feature.feature == item.name){
                item.checked=true
              }
            })
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    submit() {
      if(this.$u.test.isEmpty(this.model.houseType)){
        return this.$mytip.toast('请选择户型')
      }
      if(this.$u.test.isEmpty(this.model.houseArea)){
        return this.$mytip.toast('请输入面积')
      }
      if(this.$u.test.isEmpty(this.model.price)){
        return this.$mytip.toast('请输入租金')
      }
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      })
      if(this.$u.test.isEmpty(files)){
        return this.$mytip.toast('请至少选择一张房源图片')
      }
      let imageList = files.map(val => {
        return {
          imageName: val.response.realName,
          imagePath: val.response.fileName,
          imgUrl: val.response.url,
          imageSize: val.file.size
        }
      })
      this.model.imageList = imageList
      if(this.$u.test.isEmpty(this.model.featureList)){
        return this.$mytip.toast('请至少选择一个房源亮点')
      }
      let url = "api/houseApi/saveHouse";
      if(this.model.id){
        url = "api/houseApi/updateHouse";
      }
      this.model.publishId = uni.getStorageSync('lifeData').vuex_user.user.userId;
      this.$u.post(url,this.model).then(data => {
        // uni.$emit('findIndexHouseList', {});
        // this.$u.route({
        // 	type: 'tab',url: '/pages/index/index'
        // })
        this.$u.route({
          url: 'pages/center/order',
        })
      });
    },
    // 选择类型回调
    selectConfirm(e) {
      this.model.houseType = ''
      e.map((val, index) => {
        if(index == 0){
          this.model.houseNum = val.label;
        }else if(index == 1){
          this.model.houseHall = val.label;
        }else if(index == 2){
          this.model.toiletNum = val.label;
        }
        this.model.houseType += val.label;
        this.houseTypeVo = this.model.houseType
      })
    },
    // 点击actionSheet回调
    actionSheetCallback(index) {
      uni.hideKeyboard();
      this.model.stepType = this.actionSheetList[index].text;
    },
    // checkbox选择发生变化
    checkboxGroupChange(e) {
      let featureList = e.map(val => {
        return {
          feature: val
        }
      })
      this.model.featureList = featureList
    },
    borderChange(index) {
      this.border = !index;
    },
    labelPositionChange(index) {
      this.labelPosition = index == 0 ? 'left' : 'top';
    },
    codeChange(text) {
      this.codeTips = text;
    },
    dateClick(){
      this.show = true
    },
    changeDate(e){
      this.model.startDate = e.result
      this.dateLabel = e.result
    }
  }
};
</script>

<style>
page{
  background-color: #FFFFFF;
}
</style>
<style scoped lang="scss">

.wrap {
  padding: 30rpx;
}

.scroll-wrapper{
  position: absolute;
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  bottom: 120rpx;
}

.bottom-btn {
  position: fixed;
  bottom: 8rpx;
  width: 100%;
  padding: 30rpx;
  border-top: 1rpx solid #ccc;
  background-color: #FFFFFF;
}

.dateBtn{
  position: absolute;
  right: 0rpx;
  top:10rpx;
  color: #606266;
}

.slot-btn {
  width: 160rpx;
  height: 160rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.custom-gap{
  width: 1000rpx;
  height: 10rpx;
  margin: 0 -200rpx 0 -200rpx;
  background-color: rgb(235, 236, 238);
}
</style>
